@extends('layout.page')
@section('title','手工发奖 - 单个发奖')
@section('stylesheet')
    <link href="/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
    <style>
        .short {
            /*width: 150px;*/
            display: inline-block;
            text-align: center;
            padding: 5px 25px 5px 5px;
            margin: 5px;
            border-radius: 20%;
        }
    </style>
@endsection
@section('static-page')
        <div class="ibox">
            <div class="ibox-content">
                <form id="send-gift-form" method="POST" action="/ceb/handgifts/group" class="form-horizontal">

                    {{csrf_field()}}
                    <div class="form-group">
                        <label class="col-md-2 form-label">选择群体</label>

                        <div class="col-sm-8">
                            <select class="form-control" id="group" name="group">
                                <option value="0" selected>全部</option>
                                @foreach($group_list as $group)
                                    <option value="{{$group->id}}">{{$group->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div id="selected-group"></div>
                        <div class="col-sm-2">
                            <a class="btn btn-success" id="user-search-btn">确定</a>
                        </div>
                        <table id="user-list"></table>
                        <div id="user-list-pager"></div>
                        <div id="selected-user-list"></div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 form-label">奖池名称</label>

                        <div class="col-sm-8">
                            <input id="reward-keyword" class="form-control">
                        </div>
                        <div class="col-sm-2">
                            <a class="btn btn-success" id="reward-search-btn">查询</a>
                        </div>
                    </div>
                    <div class="jqGrid_wrapper">
                        <table id="reward-list"></table>
                        <div id="reward-list-pager"></div>
                    </div>
                    <div id="selected-reward"></div>
                    <a class="btn btn-success" id="submit">发放</a>
                </form>
            </div>
        </div>

@endsection

@section('modals')
    <div class="modal fade" id="reward_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">奖池详情</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                        <th>类型</th>
                        <th>券名称</th>
                        <th>面值</th>
                        <th>起投金额</th>
                        <th>起投期限</th>
                        <th>有效期截止</th>
                        <th>有效天数</th>
                        </thead>
                        <tbody class="reward-list">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('javascript')

<script src="/js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
<script src="/js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script>
    $.jgrid.defaults.styleUI = 'Bootstrap';
    var selected_user_map = {};
    var select_reward_map = {};

    var user_jqgrid = new JqgridTable('#user-list', {
        colNames: ['ID', '手机号', '姓名', '操作'],
        colModel: [
            {
                name: 'uid',
                index: 'uid',
                width: 60,
                sorttype: "int"
            },
            {
                name: 'user_phone',
                index: 'user_phone',
                width: 180,
                sorttype: "int",
            },
            {
                name: 'real_name',
                index: 'real_name',
                width: 100
            },
            {
                name: 'action',
                index: 'action',
                width: 100
            }
        ],
        pager: "#user-list-pager"
    }, '/ceb/users/filters', 'POST');
    var reward_jqgrid = new JqgridTable('#reward-list', {
        colNames: ['奖池名称', '奖品', '操作'],
        colModel: [
            {
                name: 'name',
                index: 'name',
                width: 100,
            },
            {
                name: 'reward',
                index: 'reward',
                width: 200,
            },
            {
                name: 'action',
                index: 'action',
                width: 80
            }
        ],
        pager: "#reward-list-pager"
    }, '/ceb/rewardpackages/search', 'GET');


    function setTags(container, list, postName) {
        container = $(container).empty();
        $.each(list, function (k, v) {
            var s = '<div class="alert alert-success alert-dismissable short">' + v.name;
            if (postName) {
                s += '<input type="text" name="' + postName + '[]" value="' + v.value + '" class="hidden">';
            }
            s += '<button aria-hidden="true" data-dismiss="alert" class="close" type="button" data-value="' + v.value + '">×</button>' +
                    '</div>';
            container.append(s);
        });
    }


    function resetUser() {
        var list = [];
        $.each(selected_user_map, function (k, v) {
            list.push(v);
        });
        setTags('#selected-user-list', list, 'ignore_user');
        $('#selected-user-list .close').on('click', function () {
            var value = $(this).data('value');
            delete selected_user_map[value];
            resetUser();
        });
    }
    function resetReward() {
        var list = [];
        $.each(select_reward_map, function (k, v) {
            list.push(v);
        });
        setTags('#selected-reward', list, 'rewards');

        $('#selected-reward .close').on('click', function () {
            var id = $(this).data('value').split(',')[0];
            delete select_reward_map[id];
            resetReward();
        });
    }

    $(document).ready(function () {

        $('#user-search-btn').on('click', function () {
            var group = [$('#group').val()];
            var map;

            user_jqgrid.getData({filter_type: 2, filter_list: group}, function (l) {
                map = mkmap(l, 'id');
                var list = [];
                $.each(l, function (k, v) {
                    v.action = '<a href="javascript:;" class="btn-ignore" data-id="' + v.id + '">忽略</a>';
                    list.push(v);
                });
                return list;
            }).on('hxop.jqgrid-show', function () {
                $("#user-list .btn-ignore").on('click', function () {

                    var id = $(this).data('id');
                    if (id in selected_user_map) return;
                    selected_user_map[id] = {
                        name: map[id].real_name,
                        value: id
                    };

                    resetUser();
                });
            });
        });

        $('#reward-search-btn').on('click', function () {
            var keyword = $('#reward-keyword').val();
            if (!keyword) {
                alert('请输入关键字查询');
                return;
            }
            reward_jqgrid.getData({keyword: keyword}, function (l) {
                var list = [];
                $.each(l, function (k, v) {
                    var d = {};
                    d.name = v.name;
                    d.action = "<a class='add-reward-btn' data-id='" + v.id + "'>选择</a> | <a class='reward-detail-btn' data-id='" + v.id + "' data-items='" + JSON.stringify(v.items) + "'>查看详情</a>";
                    d.reward = '';


                    $.each(v.items.cash_voucher_list, function (k1, v1) {
                        d.reward += v1.name + ','
                    });
                    $.each(v.items.rate_increment_voucher_list, function (k1, v1) {
                        d.reward += v1.name + ','
                    });
                    $.each(v.items.red_packet_list, function (k1, v1) {
                        d.reward += v1.name + ','
                    });
                    d.reward = d.reward.substr(0, d.reward.length - 1);
                    list.push(d);
                });
                return list;
            }).off().on('hxop.jqgrid-show', function () {
                $('.add-reward-btn').on('click', function () {
                    var row = $(this).parents('tr');
                    var id = $(this).data('id');
                    var name = row.children().first().html();
                    select_reward_map = {};
                    select_reward_map[id] = {
                        name: name,
                        value: id
                    };
                    resetReward();
                });
                $('.reward-detail-btn').on('click',function(){
                    var items = $(this).data('items');
                    var s = getPackagesDetails(items);
                    var modal = $('#reward_dialog');
                    console.log(s);
                    $('.reward-list',modal).html(s);
                    modal.modal();
                });
            });
        });
        var form = $('#send-gift-form');
        $('#submit').on('click', function () {
            if ($('input[name*=rewards]').length == 0) {
                alert('请选择要发送的奖励!');
                return;
            }

            form.submit();

        });

        $(window).on('resize', setJqGridWidth);

        function setJqGridWidth() {
            var width = $('.jqGrid_wrapper').width();
            $('#user-list').setGridWidth(width);
        }
    });
</script>
@endsection
